<template>
	<view class="">
		<view class="marginTop-120">
			<image :src="avatar" mode="" class="info_img"></image>
			<view class="info_name">
				{{name}}
			</view>
			<view class="info_pro">
				{{grade_name}}
			</view>
		</view>
		<view class="box">
			<view class="box_title marginBottom-20">
				身份验证
			</view>
			<input type="number" v-model="keyword" placeholder="请输入您的预留手机号后四位进行验证" />
		</view>
		<view class="btn" @click="loginClick()">
			登录
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		defineProps,
		inject,
		defineExpose
	} from 'vue'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	const keyword = ref('')
	const avatar=ref('')
	const name=ref('')
	const grade_name=ref('')
	const CutStudentLoginApi = inject('CutStudentLogin')
	const student_id = ref('')
	onLoad((opt) => {
		student_id.value = opt.student_id
		grade_name.value=opt.grade_name
		name.value=opt.name
		avatar.value=opt.avatar
	})
	const loginClick = () => {
		CutStudentLoginApi({
			student_id: student_id.value,
			mobile_verify: keyword.value,
		}).then(res => {
			console.log(res, 999999999)
			if(res.status==201){
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
			}else{
				uni.setStorageSync('userInfo', res.user)
				uni.setStorageSync('token', res.token)
				uni.setStorageSync('identity','campus')
				uni.redirectTo({
					url: '/pages/index/index'
				})
			}
			
		})
	}
</script>


<style scoped lang="scss">
	.info_img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin: 0 auto 16rpx;
		display: block;
	}

	.info_name {
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		text-align: center;
	}

	.info_pro {
		font-weight: bold;
		font-size: 26rpx;
		color: #999999;
		text-align: center;
	}

	.box {
		width: 646rpx;
		height: 156rpx;
		background: #F5F5F5;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 100rpx auto 0;
		padding: 30rpx 20rpx;

		.box_title {
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
		}

		input {
			width: 586rpx;
			height: 96rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			font-weight: 500;
			font-size: 28rpx;
			padding: 0 30rpx;
		}
	}

	.btn {
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 702rpx;
		height: 104rpx;
		background: #51D580;
		border-radius: 92rpx 92rpx 92rpx 92rpx;
		text-align: center;
		line-height: 104rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
	}
</style>